<template>
  <div class="movie-list">
    <!-- 加载状态 -->
    <div v-if="isLoading && movies.length === 0" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
      <div v-for="i in 10" :key="i" class="aspect-[2/3] bg-background-800 rounded-lg animate-pulse">
        <div class="flex-1 bg-background-700 rounded-t-lg"></div>
        <div class="p-3 bg-background-800">
          <div class="h-4 bg-background-700 rounded mb-2"></div>
          <div class="h-4 bg-background-700 rounded w-3/4 mb-2"></div>
          <div class="flex gap-2 mt-4">
            <div class="h-6 bg-background-700 rounded-full w-12"></div>
            <div class="h-6 bg-background-700 rounded-full w-16"></div>
            <div class="h-6 bg-background-700 rounded-full w-10"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 电影列表 -->
    <div v-else>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
        <MovieCard
          v-for="movie in movies"
          :key="movie.id"
          :cover-url="movie.coverUrl"
          :title="movie.title"
          :rating="movie.rating"
          :tags="movie.tags"
          :is-ai="movie.isAi"
          :show-tags="showTags"
          @click="navigateToMovie(movie.id)"
        />
      </div>
      
      <!-- 加载更多 -->
      <div v-if="hasMore" class="mt-8 text-center">
        <UiButton
          v-if="!isLoading"
          @click="loadMore"
          variant="primary"
          size="lg"
        >
          加载更多
        </UiButton>
        <div v-else class="flex items-center justify-center gap-3 text-text-muted">
          <div class="relative">
            <div class="animate-spin rounded-full h-6 w-6 border-2 border-background-600 border-t-primary-500"></div>
          </div>
          <span class="text-sm">加载更多电影中...</span>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="!isLoading && movies.length === 0" class="text-center py-16">
      <div class="mb-6">
        <div class="w-24 h-24 mx-auto bg-gradient-to-br from-background-700 to-background-800 rounded-full flex items-center justify-center mb-4">
          <svg class="w-12 h-12 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-10 0a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2"></path>
          </svg>
        </div>
        <div class="text-text-secondary text-lg mb-2">
          {{ emptyStateTitle }}
        </div>
        <div class="text-text-muted text-sm">
          {{ emptyStateDescription }}
        </div>
      </div>
      <UiButton
        v-if="showClearButton"
        @click="$emit('clear-filters')"
        variant="primary"
      >
        清除筛选条件
      </UiButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import MovieCard from './MovieCard.vue'
import { UiButton } from '../ui'

// Props
interface Props {
  movies: any[]
  isLoading?: boolean
  hasMore?: boolean
  showTags?: boolean
  emptyStateTitle?: string
  emptyStateDescription?: string
  showClearButton?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  movies: () => [],
  isLoading: false,
  hasMore: false,
  showTags: true,
  emptyStateTitle: '暂无电影数据',
  emptyStateDescription: '请稍后再试',
  showClearButton: false
})

// Emits
const emit = defineEmits<{
  'load-more': []
  'clear-filters': []
}>()

const router = useRouter()

// 方法
const navigateToMovie = (id: number) => {
  router.push(`/movie/${id}`)
}

const loadMore = () => {
  emit('load-more')
}
</script>
